// Captcha：全自动区分人与计算机的图灵测试（验证码）
// 细节：
// 1. 验证码实质上是啥？  图片
// 2. 验证码可以被点击，可能存在看不清的情况
// 3. 验证码的获取方式：
//      a. 验证码是由后端产生的且由后端验证
//      b. 两种获取展示方式：
//          ①后端直接输出图片
//          ②后端输出图片的编码字符串
//          无论是哪一种方式，用法是一样的，如果是直接输出图片，那么我们只需要将图片地址给到img标签的src属性；如果是编码字符串，则也是给到img的src属性。
// 4. 验证码在做前端后端分离项目的时候，后端除了给验证码以外，还会给到一个key值，请注意key值与验证码是唯一一一对应匹配的【要理解key值的作用】，key值后续需要在提交用户输入的验证码的时候一并提交给服务端（前端需要负责key值的临时存储，获取之后，提交之前）
// 5. 既然是封装就得考虑全面一些，还需要考虑验证码的尺寸大小的通用性
// 6. key存储的问题，存在父组件中还是存在当前组件的state中？【谁调用谁存储，如果存在当前组件中会存在key值被覆盖的情况】

// 使用方法：
// a. 需要在使用验证码的组件中去导入并使用验证码组件
// b. 该组件接收三个props属性：
//      w：验证码宽度，默认值120
//      h：验证码高度，默认值40
//      setKey：用于让父组件获取并保存key值的方法，必须传递，且父并需定义

import React, { Component } from "react";
import axios from "axios";
class Captcha extends Component {
    state = {};

    render() {
        // 灵活的去获取尺寸大小
        let w = this.props.w || 120;
        let h = this.props.h || 40;
        return (
            <>
                <img src={this.state.img} alt="点击刷新验证码" onClick={this.loadCaptcha.bind(this)} width={w} height={h} />
            </>
        );
    }

    componentDidMount() {
        // 首次请求验证码
        this.loadCaptcha();
    }

    // 刷新验证码
    loadCaptcha() {
        axios.get("https://reactapi.iynn.cn/captcha/api/math").then((res) => {
            this.setState({
                // 验证码的key值
                key: res.data.key,
                // 验证码的图片编码字符串
                img: res.data.img,
            });

            // 假设父传递一个方法来获取key值，拟定方法名为setKey
            this.props.setKey(res.data.key);
        });
    }
}

export default Captcha;
